<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ include file="../../common/base.jsp"%>
<%
	response.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="${path }/dist/css/bootstrap.css" rel="stylesheet">


<!-- Button -->
<link href="${path }/dist/css/compiled/elements.css" rel="stylesheet">
<!-- libraries -->
<link rel="stylesheet" type="text/css"  href="${path }/dist/css/font-awesome.css">
<!-- this -->
<link rel="stylesheet" type="text/css" href="${path }/dist/css/app.css">
<!-- 右键菜单插件 -->
<link rel="stylesheet" type="text/css" href="${path }/dist/css/smartMenu.css">

<link href='${path }/dist/css/zTreeStyle/zTreeStyle.css' rel='stylesheet' />
<link href="${path }/dist/css/bootstrap-datetimepicker.min.css" rel="stylesheet"><%--时间日期工具 --%>

<link rel="stylesheet" type="text/css" href="${path }/back/ifrom.css">
<script src="${path }/dist/js/jquery.min.js"></script>
<script src='${path }/dist/js/bootstrap.min.js'></script>
<script src='${path }/dist/js/jquery-smartMenu.js'></script>
<script src='${path }/dist/js/jquery.ztree.core-3.5.js'></script>
<script src='${path }/dist/js/jquery.ztree.excheck-3.5.js'></script>
<script src='${path }/dist/js/jquery.ztree.exedit-3.5.js'></script>
<script src="${path }/dist/js/bootstrap-datetimepicker.min.js"></script>
<script src="${path }/dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
<%-- <script src='${path }/dist/js/stickUp.js'></script>--%>

<style>
.left_tree{
	height: 400px;
	overflow: auto;
	border: 1px solid #ccc;
	 border-radius: 5px;
}
#pad-wrapper h3{
	font-family: "黑体";
}
.my_modal{
	position: absolute;
	height: 200px;
	width: 600px;
	display:none;
	left: 20%;
	top: 10%;
}
.my_input {
  width: 150px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.my_input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.ztree [class^="icon-"],
.ztree [class*=" icon-"]{
	color:#000;
}
.ztree span.icon-home{
	font-size: 20px;
	
}

#staff_table th{
	padding: 10px 0;
	cursor: pointer;

}
#staff_table th:hover{
text-decoration:  underline;

}
#staff_table td, #staff_table th{
	padding: 5px 3px;
	vertical-align:middle;
	min-width:70px;
	word-break: keep-all;/*强制不换行*/
} 
#menuContent .ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
</style>
</head>
<body>
<div id="pad-wrapper">
	<div class="row head" >
	<div class="col-md-12 ">
			<h3>部门员工管理<em><small>左键点击左边目录树出现员工列表，右键对右边的列表操作。也可以直接从excel文件导入员工数据。</small></em></h3>
			</div>
	</div>
	<hr>
	<div class="row">
		<div class="col-md-2">
			<div class="row">
				<div class="col-md-12 left_tree">
					<div class="ztree" id="depttree"></div>
				</div>
				<div class="col-md-12">
					统计部分
				</div>
			</div>
		</div>
		<div class="col-md-10 table-wrapper users-table">
			<div class="row filter-block">
				<div class="pull-right">
					<a class="btn-flat success new-product" id="add"><i class="icon-plus"></i> <span>Add Staff</span></a>
					<%--
					<a class="btn-flat success new-product" id="edit" ><i class="icon-edit"></i> <span>Edit</span></a>
					<a class="btn-flat success new-product" id="remove"><i class="icon-trash"></i><span>Del</span></a>
					 --%>
					<a class="btn-flat success new-product" id="export" href="${path }/downfile!downDept"><i class="icon-cloud-download"></i><span>Export Exl</span></a>
					<a class="btn-flat success new-product" id="import"><i class="icon-cloud-upload"></i><span>Import Exl</span></a>
					<%--disabled --%>
				</div><!-- 按钮组 -->
			</div>
			<div class="row" style="margin-top: 5px;">
				<div class="col-md-12" style="overflow-x: auto;">
					<div style="width: 1300px; height: 500px;">
					<table class="table table-striped table-bordered" id="staff_table" >
						<thead >
							<tr id="table_title" class="table_title">
								<th class="sortable" width="100"><span>ID</span ></th>
								<th class="sortable" ><span class="line"></span><span >姓名</span></th>
								<th class="sortable" ><span class="line"></span><span >性别</span></th>
								<th class="sortable" ><span class="line"></span><span >学历</span></th>
								<th class="sortable" ><span class="line"></span><span >电话</span></th>
								<th class="sortable" ><span class="line"></span><span >住址</span></th>
								<th class="sortable" ><span class="line"></span><span >出生日期</span></th>
								<th class="sortable" ><span class="line"></span><span >部门</span></th>
								<th class="sortable" ><span class="line"></span><span >职务</span></th>
								<th class="sortable" ><span class="line"></span><span >薪水</span></th>
								<th class="sortable" ><span class="line"></span><span >身份证</span></th>
								<th class="sortable" ><span class="line"></span><span >录用时间</span></th>
							</tr>
						</thead>
						<tbody id="node_tbody" >
						</tbody>
				</table>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="my_modal" id="edit_modal">
	<form action="#" method="post" id="edit_dept_staff_form">
	    <div class="modal-content ">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="hideMenu()"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">增加员工</h4>
	      </div>
	      <div class="modal-body">
	       		<table class="table table-bordered table-hover">
					<thead>
						<tr><th colspan="4">以下选项由管理员设置：</th></tr>
					</thead>
					<tbody>
						<tr><td class="title"><span style="color: #f00;">*</span>编号：</td>
							<td><input type="text" class="form-control input-sm" name="staff.staff_number" data-vail/></td>
							<td class="title"><span style="color: #f00;">*</span>姓名：</td>
							<td><input type="text" class="form-control input-sm" name="staff.staff_name" data-vail/></td>
						</tr>
						<tr>
							<td class="title"><span style="color: #f00;">*</span>学历：</td>
							<td><select class="form-control input-sm" style="padding: 0px;" name="staff.staff_eb">
  									<option value="博士">博士</option>
  									<option value="硕士">硕士</option>
  									<option value="本科">本科</option>
  									<option value="专科">专科</option>
  									<option value="高中">高中</option>
  									<option value="初中">初中</option>
  								</select>
							</td>
							<td class="title"><span style="color: #f00;">*</span>性别：</td>
							<td>
  								<input type="radio" name="staff.staff_sex"  value="男" checked="checked"/>男
  								<input type="radio" name="staff.staff_sex"  value="女" />女
							</td>
						</tr>
						<tr><td class="title"><span style="color: #f00;">*</span>联系电话：</td>
							<td><input type="text" class="form-control input-sm" name="staff.staff_phone" onkeyup="this.value=this.value.replace(/\D/g,'')" data-vail/></td>
							<td class="title">出生年月：</td>
							<td><input type="text" class="form-control input-sm form_datetime" name="staff.staff_date_birth" readonly="readonly"/></td>
						</tr>
						<tr><td class="title"><span style="color: #f00;">*</span>部门名称：</td>
							<td><input type="text" class="form-control input-sm" name="dept_name" readonly="readonly" data-vail/></td>
							<td class="title">部门编号：</td>
							<td><input type="text" class="form-control input-sm" name="dept_id" readonly="readonly" data-vail/></td>
						</tr>
						<tr><td class="title">录用时间：</td>
							<td><input type="text" class="form-control input-sm form_datetime" name="staff.staff_hire" readonly="readonly"/></td>
							<td class="title">职位：</td>
							<td><select class="form-control input-sm" style="padding: 0px;" name="staff.staff_post" >
									<option value="暂无">暂无</option>
  								</select></td>
						</tr>
						<tr><td class="title"><span style="color: #f00;">*</span>薪水：</td>
							<td><input type="text" class="form-control input-sm" name="staff.staff_salary" placeholder="0.00￥" data-vail/></td>
						</tr>
						<tr><td class="title"><span style="color: #f00;">*</span>身份证：</td>
							<td colspan="3"><input type="text" class="form-control input-sm" name="staff.staff_id_card" data-vail/></td>
						</tr>
						<tr><td class="title">住址：</td>
							<td colspan="3"><input type="text" class="form-control input-sm" name="staff.staff_address"/></td>
						</tr>
					</tbody>
				</table>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" onclick="hideMenu()">Close</button>
	        <button type="button" class="btn btn-primary" id="edit_dept_staff_submit">确认提交</button>
	      </div>
	    </div>
	  </form>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
	<ul id="dept_tree2" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
	<script type="text/javascript">
	var setting = {
			view: {
				selectedMulti: false,//多选
				showLine: true,
				nameIsHTML: true
			}, callback : {
				beforeClick : beforeClick,
			},data:{
				simpleData:{
					enable: true,
				}
			}
		};
	var setting2 = {
			view: {
				selectedMulti: false,//多选
				showLine: true,
				nameIsHTML: true
			}, callback : {
				beforeClick : seletdept,
			},data:{
				simpleData:{
					enable: true,
				}
			}
		};
	var tdmenuData=[
	                [{text: "新增员工", func:addnode },
	                 {text: "修改", func:edit },
	                 {text: "辞退", func:gun },
	                 {text: "删除", func:remove }
	                ],[{text: "完成", func:confirm_submit}]
	               ];
	
	var ztreeobj;
	//当前层级新增
	function addnode(){
		$("#edit_modal input[type='text']").each(function(i){//清空
			$(this).val("");
		});
		$("#myModalLabel").html("增加员工");
		nodes=ztreeobj.getSelectedNodes();
		$("#edit_modal").fadeIn("fast");
		//$("#edit_modal form").attr("action","${path}/back/staff!addstaff");
		seletdept(nodes[0].id,nodes[0]);
		$("#edit_dept_staff_submit").unbind("click");
		$("#edit_dept_staff_submit").bind("click",add_staff);
	}
	//打开修改框
	function edit(){
		if($(this).hasClass('no_record')){
			alert("别闹，这又不是记录")
			return ;
		}
		$("#myModalLabel").html("修改员工");
		$("td",$(this)).each(function(i){//赋值
			//$("#edit_modal input[type='text']").eq(i).val($(this).html());
			var input =$("#edit_modal [name='"+$(this).data("name")+"']");
			if(input.attr("type")=='radio')
				input.attr("checked","checked");
			else 
				input.val($(this).html());
		});
		$("#edit_modal form input[name='dept_id']").val($(this).data("dept-id"));

		$("#edit_modal").fadeIn("fast");
		$("#edit_dept_staff_submit").unbind("click");
		$("#edit_dept_staff_submit").bind("click",{id:$(this).data("id")},edit_staff);
	}
	
	function gun(){
		alert($(this).html());
	}
	function remove(){
		var  from_data=[{name:"id",value:$(this).data("id")}];
		var saveURL = "${path}/back/staff!delstaff?date="+new Date()+"";
		jQuery.post(saveURL,from_data,function(jsonData){
			if(jsonData.info){
				alert(jsonData.text);
			 	window.location.reload();
			}else{
				alert("删除失败：原因\n"+jsonData.text);
			}
		},"json");
	}
	function confirm_submit(){
		alert($(this).html());
	}
	//节点点击事件
	function seletdept(treeId, treeNode){
		if(treeNode.isParent){
			return true;
		}else{
			$("#edit_dept_staff_form input[name='dept_name']").val(treeNode.name);
			$("#edit_dept_staff_form input[name='dept_id']").val(treeNode.id);
		}
		return true;
	}
	
	//新增员工，表单提交函数
	//表单提交验证
	function add_staff(){
		var formDom=$(this).closest("form");
		
		if(fromisnotnull(formDom)){
			var form_data=formDom.serializeArray();
			/* $.each(form_data,function(i,j){
				alert(j.name+":"+j.value);
			}); */
			var saveURL = "${path}/back/staff!addstaff?date="+new Date()+"";
			jQuery.post(saveURL,form_data,function(jsonData){
				if(jsonData.info){
					alert(jsonData.text);
				 	window.location.reload();
				}else{
					alert("添加失败：原因\n"+jsonData.text);
				}
			},"json");
		} 
			
	}
	function edit_staff(e){
		var formDom=$(this).closest("form");
		if(fromisnotnull(formDom)){
			// alert(e.data.id);
			var form_data=formDom.serializeArray();
			form_data.push({name:"staff.id",value:e.data.id});
/* 			$.each(form_data,function(i,j){
				alert(j.name+":"+j.value);
			});  */
			var saveURL = "${path}/back/staff!editstaff?date="+new Date()+"";
			jQuery.post(saveURL,form_data,function(jsonData){
				if(jsonData.info){
					alert(jsonData.text);
				 	window.location.reload();
				}else{
					alert("修改失败：原因\n"+jsonData.text);
				}
			},"json");
		} 
			
	}
	function beforeClick(treeId, treeNode){
		$.smartMenu.remove();
		var target=$("#node_tbody");
		target.empty();//清空
		if(treeNode.isParent){
			return true;
		}else{
			var saveURL = "${path}/back/staff!getstaffBydept?date="+new Date()+"";
			jQuery.post(saveURL,[{name:"id",value:treeNode.id}],function(jsonData){
				if(jsonData!=null){
					addTr(jsonData,treeNode,target);
				}
				$("#node_tbody tr").smartMenu(tdmenuData,{name:"dept_tdmenu"});
			},"json");
			
		}
		//绑定右键菜单
		//alert($("#staff_table").html());
		
		return true;
	}
	function addTr(jsonData,treeNode,target){
		for(var j=0;j<jsonData.length;j++){
			var tr_obj=$("<tr data-id='"+jsonData[j].ID+"' data-dept-id='"+treeNode.id+"'>").appendTo(target);
			$("<td data-name='staff.staff_number'>"+jsonData[j].STAFF_NUMBER+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_name'>"+jsonData[j].STAFF_NAME+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_sex'>"+jsonData[j].STAFF_SEX+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_eb'>"+jsonData[j].STAFF_EB+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_phone'>"+jsonData[j].STAFF_PHONE+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_address'>"+jsonData[j].STAFF_ADDRESS+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_date_birth'>"+jsonData[j].STAFF_DATE_BIRTH+"</td>").appendTo(tr_obj);
			$("<td data-name='dept_name'>"+treeNode.name+"</td>").appendTo(tr_obj);//data-dept-id='"+treeNode.id+"'
			$("<td data-name='staff.staff_post'>"+jsonData[j].STAFF_POST+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_salary'>"+jsonData[j].STAFF_SALARY.toFixed(2)+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_id_card'>"+jsonData[j].STAFF_ID_CARD+"</td>").appendTo(tr_obj);
			$("<td data-name='staff.staff_hire'>"+jsonData[j].STAFF_HIRE+"</td>").appendTo(tr_obj);
		}
	}
	$(document).ready(function() {
		var saveURL = "${path}/back/tree!deptTree?date="+new Date()+"";
		jQuery.post(saveURL,null,function(jsonData){
			ztreeobj=$.fn.zTree.init($("#depttree"), setting,jsonData);
			var node = ztreeobj.getNodeByParam("id", 10, null);
			ztreeobj.selectNode(node,false);
			beforeClick(node.tId,node);
			$.fn.zTree.init($("#dept_tree2"),setting2,jsonData);
		},"json");
		saveURL="${path}/back/basis!getbasis_josn?date="+new Date()+"";//;getbasis_josn
		jQuery.post(saveURL,[{name:"type",value:"员工职位"}],function(jsonData){
			if(jsonData){
				//
				var target =$("select[name='staff.staff_post']");
				for(var i=0;i<jsonData.length;i++){
					$("<option value='"+jsonData[i].measure_name+"'>"+jsonData[i].measure_name+"</option>").appendTo(target);
				}
			}		
		},"json");
		$("#add").click(addnode);
		$("input[name='dept_name']").bind("click",function(){
			var cityObj = $(this);
			var cityOffset = cityObj.offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDowndept);
		});
		
	});
	//时间日期
	$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd',language:  'zh-CN',weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1,
        minView: 2,
        pickerPosition:"bottom-left"});
	function onBodyDowndept(event){
		if (!($(event.target).parents("#menuContent").length>0)) {
			hidedepttree();
		}
	}

	//解除 body绑定
	function hidedepttree(){
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown",onBodyDowndept);
	}
	function hideMenu() {
		$("#edit_modal").fadeOut("fast");
	}
	function fromisnotnull(formdom){
		var  pass =true;
		$("input[type='text'][data-vail]",formdom).each(function(){
			if($(this).val()==null||$(this).val()==""){
				alert("*为必填项");
				pass =false;
				return false;
			}
		});
		return pass;
	}
	</script>
	<c:if test="${tip!=null }">
		<script>
			alert("${tip}");
		</script>
	</c:if>
</body>
</html>